<script setup>
import SltFromOthApi from '@/components/SltFromOthApi/SltFromOthApi.vue'
import { PlusOutlined, SearchOutlined, RedoOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';

const emits = defineEmits(['add', 'init', 'search'])
// 新增按钮点击
const add = () => {
  emits('add')
}
// 刷新
const name = ref('')
const phone = ref('')
const userName = ref('')
const orderStatus = ref(null)
const roleId = ref(null)
const departmentId = ref(null)
const init = () => {
  name.value = ''
  phone.value = ''
  userName.value = ''
  orderStatus.value = null
  roleId.value = null
  departmentId.value = null
  emits('init')
}
// 搜索
const search = () => {
  emits('search', {
    name: name.value ?? null,
    phone: phone.value ?? null,
    userName: userName.value ?? null,
    roleId: roleId.value?.[roleId?.value?.length - 1] || null,
    departmentId: departmentId.value?.[departmentId?.value?.length - 1] || null,
  })
}
</script>

<template>
  <div class="head">
    <AButton type="primary" @click="add">
      <PlusOutlined /> 新增
    </AButton>
    <div class="right">
      <a-input @input="search" v-model:value="name" placeholder="请输入用户名称查询" class="com-ipt" allowClear>
        <template #suffix>
          <SearchOutlined />
        </template>
      </a-input>
      <a-input @input="search" v-model:value="phone" placeholder="请输入用户电话查询" class="com-ipt" allowClear>
        <template #suffix>
          <SearchOutlined />
        </template>
      </a-input>
      <a-input @input="search" v-model:value="userName" placeholder="请输入登录帐号查询" class="com-ipt" allowClear>
        <template #suffix>
          <SearchOutlined />
        </template>
      </a-input>
      <SltFromOthApi @change="search" :fieldNames="{ label: 'name', value: 'id', children: 'children' }" v-model="roleId"
        placeholder="请选择角色查询" :dataProp="['data', 'records']" apiName="getRoleList" class="com-ipt"
        :params="{ size: 9999 }" />
      <SltFromOthApi @change="search" :fieldNames="{ label: 'name', value: 'id', children: 'children' }"
        v-model="departmentId" placeholder="请选择所属部门查询" apiName="getDepList" class="com-ipt" />
      <AButton type="primary" @click="search">
        <SearchOutlined /> 搜索
      </AButton>
      <AButton type="primary" @click="init">
        <RedoOutlined /> 刷新
      </AButton>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.head {
  display: flex;
  gap: 8px;
  justify-content: space-between;

  .right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
}
</style>